<template>
    <!-- 添加外层容器并添加overflow-hidden -->
    <div class="menu-wrapper">
        <el-menu
            :class="['aside-container', { 'is-collapsed': menu.isCollapsed }]"
            active-text-color="#ffd04b"
            background-color="#545c64"
            text-color="#fff"
            :collapse="menu.isCollapsed"
            @open="handleOpen"
            @close="handleClose"
            >
        <!-- Logo过渡优化 -->
            <transition name="logo-slide">
                <div class="logo-container" :key="menu.isCollapsed">
                    <span v-if="!menu.isCollapsed">LoooooooGooooo</span>
                    <span v-else>Logo</span>
                </div>
            </transition>

            <tree-menu :menu-data="menuData" :index="1" />
        </el-menu>
    </div>

    <!-- <el-menu
        :style="{width: menu.isCollapsed ? '64px' : '240px'}"
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="aside-container"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        :collapse="menu.isCollapsed"
        >
        <p class="logo-lg">{{ menu.isCollapsed ? 'Logo' : 'LooooooooooGooooo' }}</p>



        <tree-menu :menuData="menuData" :index="1"/>

    </el-menu> -->
</template>

<script setup>

import TreeMenu from './treeMenu.vue'
import { useRouter } from 'vue-router'
import { computed, reactive } from 'vue';

// pinia
import { useCounterStore } from '../stores/menu'

const menu = useCounterStore()


const router = useRouter()
// const menuData = reactive(router.options.routes[0].children)

// 动态获取
const menuData = computed(() => menu.routerList)
console.log(router, 'router');
// console.log(router.options.routes[0].children[0].meta.name, 'title');





const handleOpen = () => {}
const handleClose = () => {}



</script>

<style lang="less" scoped>
.aside-container{
    height: 100%;
}
.logo-container{
    font-size: 20px;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-bottom: 20px;
}

</style>
